<style scoped>	
    /**
     * theme-light
     */
    .wsplus-theme-light .main-header {
        background: #1e88e5 !important;
    }

    .wsplus-theme-light .navbar-collapse>ul>li.active {
        background-color: #5cadff;
    }    

    /**
     * theme-dark
     */
    .wsplus-theme-dark .main-header {
        background: #585e6b!important;
    }

    .wsplus-theme-dark .navbar-collapse>ul>li.active {
        background-color: #818690;
    }     


    /**
     * 公共配置
     */
    .main-header{
        position: fixed;
        top: 0;
        left: 0px;
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-bottom: none !important;
        /*box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2), 0 3px 12px 0 rgba(0, 0, 0, .2);*/
        z-index: 20;
        color: #fff;
        display: inline;
    }
    .navbar-header {
        float: left;
        margin: 0 2em 0 1em;
        white-space: nowrap;
        letter-spacing: 3px;
        font-size: 1.7em;
        /* text-shadow: #333 0 2px 3px; */
    }
    .navbar-header>.logo {

    }
    .navbar-header>.project-name {

    }
    .navbar-collapse {
        display: block;
    }
    .nav-left {
        float: left;
    }  
    .nav-right {
        float: right;
    }       
    .navbar-collapse>ul {
        list-style: none;
    }
    .navbar-collapse>ul>li {
        cursor: pointer;
        padding-left: 15px;
        padding-right: 15px;
    }  

    .navbar-collapse.nav-right>ul>li {
        line-height: 48px;
        height: 48px;
    }     
    .navbar-collapse.nav-right>ul>li>.split-line {
    	line-height: 16px;
    	height: 16px;
    	border-left: 1px solid #4A4F5A;
    }  
    .navbar-collapse.nav-right>ul>li.ws-middle {
    	margin-left: -15px;
    	margin-right: -15px;
    }
    .pd-r10 {
        padding-right: 25px !important;
    }
    .username {
    	margin-left: 6px;
    }
    .navbar-dropdown:hover .dropdown{
    	display: block;
    }
    .navbar-dropdown .dropdown-head{
    	height: 46px;
    	line-height: 46px;
    	padding: 0 10px;
    	border-bottom: 1px solid #f2f2f2;
    }
    .navbar-dropdown .dropdown-head .nav-left{
    	color: #999;
    }
    .navbar-dropdown .dropdown-head .nav-right{
    	color: rgb(26, 188, 156);
    }
    .navbar-dropdown .dropdown{
    	position: absolute;
    	right: 5px;
    	top: 48px;
    	padding: 0 10px; 
    	background-color: #FFF;
    	z-index: 10;
    	color: #333;
    	border: 2px solid #f2f2f2;
    	border-top: none;
    	display: none;
    }
	.navbar-dropdown .dropdown-list{
		padding: 15px;
		line-height: 30px;
	}
	.navbar-dropdown .user-dropdown .dropdown-list span:first-child{
		color: #999;
	}
	
	/**custom dropdown*/
	.navbar-dropdown .user-dropdown {
    	width: 350px;		
	}
	.navbar-dropdown .common-dropdown {
    	width: 300px;		
	}	
	.navbar-dropdown .common-dropdown .dropdown-list>li {
		display:-webkit-flex;
		display:flex;
		text-align: center;
	}	
	.navbar-dropdown .common-dropdown .dropdown-list>li>a {
		-webkit-flex:1;
		flex:1;
	}
	
	span.common-menu:hover {
		color: rgb(26, 188, 156);
	}
	
</style>
<style>
    .demo-badge-alone{
        min-width: 18px !important;
        height: 16px !important;
        border-radius: 16px !important;
        padding: 0px 1px 0px 0px !important;
        line-height: 16px !important;
        border: 1px solid #ed3f14 !important;
        box-shadow: 0 0 0 1px #ed3f14 !important;
    }
</style>
<template>
    <div>
    <header class="main-header">
        <div class="header-container">
            <div class="navbar-header">
                <span class="logo"></span>
                <span class="project-name">{{projectName}}</span>
            </div>
            <div class="navbar-collapse nav-left">
                <ul class="nav navbar-nav">
                    <li class="navbar-menu nav-left" v-for="(item, index) in navMenus" :class="{'active': index == activeIndex}" @click.prevent="navMenuItemClick(item, index)">{{item.label}}</li>
                </ul>
            </div>
            <div class="navbar-collapse nav-right ws-middle">
            	<ul class="nav navbar-nav">
                    <!--<li class="ws-middle nav-left">
                        <div class="system-parameter">
                            联系我们 : {{systemParameter.contactUs}}
                            &nbsp;&nbsp;&nbsp;
                            qq : {{systemParameter.qq}}
                        </div>
                    </li>-->
            		<li class="navbar-menu nav-left navbar-dropdown">
                    	<div><Icon type="happy-outline" size="30"></Icon><span class="username">{{userName}}</span></div>
                    	<div class="dropdown user-dropdown">
                    		<div class="dropdown-head">
                    			<div class="nav-left">{{$t('header.accountInfo')}}</div>
                    			<div class="nav-right" v-on:click="profile">{{$t('header.accountSettings')}}</div>
                    		</div>
                    		<ul class="dropdown-list">
                    			<li><span>{{$t('header.Department')}}</span>：<span>{{userInfo.departmentName}}</span></li>
                    			<li><span>{{$t('header.thisLogin')}}</span>：<span>{{userInfo.loginTime}}</span></li>
                    			<li><span>{{$t('header.loginArea')}}</span>：<span>{{userInfo.region}}</span></li>
                    			<li><span>{{$t('header.lastLogin')}}</span>：<span>{{userInfo.lastLoginTime}}</span></li>
                    		</ul>
               			</div>
                    </li>
                    <li class="ws-middle nav-left"><div class="split-line"></div></li>
                    <li class="navbar-menu nav-left icon" :title="$t('header.SystemHomepage')" v-on:click="indexPage"><Icon type="home" size="19"/></li>
                    <li class="ws-middle nav-left"><div class="split-line"></div></li>
                    <li class="navbar-menu nav-left icon navbar-dropdown" :title="$t('header.CommonMenu')">
                    	<div><Icon type="navicon-round" size="19"></Icon></div>
                    	<div class="dropdown common-dropdown">
                    		<div class="dropdown-head">
                    			<div class="nav-left">{{$t('header.CommonMenu')}}</div>
                    			<div class="nav-right" v-on:click="showModal1" v-if="1 != 1">{{$t('header.MenuManagement')}}</div>
                    		</div>
                    		<ul class="dropdown-list">
                    			<Row>
                    				<Col :span="8" v-for="cm in commonMenus"><span class="common-menu" v-on:click="commonMenu(cm)">{{cm.label}}</span></Col>
                    			</Row>
                    		</ul>
               			</div>                   	
                    </li>   
                    <li class="ws-middle nav-left"><div class="split-line"></div></li>
                    <li class="navbar-menu nav-left icon message-badge" :title="$t('header.messageNotification')" v-on:click="jumpToMessage">
                        <Badge :count="unReadmessageCount" class-name="demo-badge-alone"> 
                            <Icon type="ios-bell" size="19"></Icon>
                        </Badge>
                    </li>
                    <li class="ws-middle nav-left"><div class="split-line"></div></li>
                    <li class="navbar-menu nav-left icon message-badge" @click="lockScreen">
                        <Tooltip :content="$t('header.LockScreen')" placement="bottom">
                        	 <Icon type="locked" :size="19"></Icon>
                        </Tooltip>
                    </li>
                    <li class="ws-middle nav-left"><div class="split-line"></div></li>
                    <li class="navbar-menu nav-left pd-r10" @click="logoutConfirm">
                    	<Tooltip :content="$t('header.dropOut')" placement="bottom">
                    		<Icon type="log-out" size="19"></Icon>
                    	</Tooltip>
                    </li>
            	</ul>
            </div>
        </div>
    </header>
    <!--常用菜单设置-->
	<!--新增弹框-->
	<wsModal v-model="modal1.show" :ok-text="$t('header.save')" :title="$t('header.menuSettings')" @on-ok="saveModal1" @on-cancel="cancelModal1">
	    <Row>
	    	<Col :span="24">
	    		<Alert>{{$t('header.messages')}}</Alert>
	    	</Col>
	    </Row>
	</wsModal>	
    </div>   
</template>
<script>
    import wsProfile from './profile';
    import quickMenu from '../../config/quick_menu.js';
    import Util from '../../common/util.js';
    import Cookies from 'js-cookie';
    export default {
        components: {
            wsProfile
        },
        data() {
        	return {
                // unReadmessageCount:null,//未读消息数量
        		projectName: '',
//              activeIndex: 0,
                lockScreenSize: 0,
                modal: {
                	logout: false
                },
                modal1: {
                	show: false
                },
                commonMenus: [],
                //用户信息
                userInfo: {
                	departmentName: '',
                	loginTime: '',
                	region: '',
                	lastLoginTime: ''
                },
                //系统参数
                systemParameter: {
                    contactUs:null,//联系我们
                    qq:null
                },
                getCurrentLanguage:false
        	}
        },
        computed: {
            //顶部导航菜单
            navMenus() {
                let menus = this.$store.getters.auth_header_menus;
                return menus;
            },
            //当前登录用户
            userName() {
            	let username_ = this.$store.getters.auth_username;
            	if(!Util.vad.isBlank(username_)) {
            		this.welcomeInfo();
            	}
            	return username_;
            },
            //未读消息数量
            unReadmessageCount(){
                let count = this.$store.getters.auth_un_readmessage_count;
                return count;
            },
            activeIndex() {
            	let index = this.$store.getters.auth_activeMenu_header;
            	return index;
            }
        },
        mounted() {
            this.init();
            // 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
            this.$i18n.locale=getCurrentLanguage;            
          
        },
        methods: {
        	init() {
        		this.projectName = Util.name();
        		this.commonMenus = quickMenu;
//      		this.activeIndex = this.$store.getters.auth_activeMenu_header;
        		console.log(quickMenu);
        		//初始化登录信息
        		let authUser = this.$store.getters.auth_user;
        		let loginProvince_ = authUser.loginProvince;
        		let loginCity_ = authUser.loginCity;
        		let region_ = '';
        		let hasData = false;
        		if(!Util.vad.isBlank(loginProvince_)) {
        			region_  = loginProvince_;
        			hasData = true;
        		}
        		if(!Util.vad.isBlank(loginCity_)) {
        			if(hasData) {
        				region_ += '·';
        				region_ += loginCity_;
        			}
        		}
        		this.userInfo = {
								departmentName: authUser.departmentName,
								loginTime: authUser.loginTime,
								region: region_,
								lastLoginTime: authUser.lastLoginTime
						 };  
               // this.loadMessageCount();//加载未读消息数量
        		
        	},
            //菜单点击
            navMenuItemClick(item_, index_) {
//              this.activeIndex = index_;
                this.$store.dispatch('authHeadMenuClick', {
                	index: index_,
                	router: this.$router
                });
            },
            //登出
            logout() {
            	const _this = this;
            	this.axios.delete("/ws/logout").then(response => {
            			var res = response.data;
            			var resMeta = res.meta;
            			if (0 == resMeta.code) {
                            _this.$store.dispatch('authLogout');
                            window.location.href = Util.loginPath();
            			}
            	});  
            },
            //登出确认
            logoutConfirm() {
                const _this = this;
                if(_this.$i18n.locale=='en'){
                    this.$confirm({
                        title: 'Alert',
                        width: 300,
                        content: 'Please confirm if you want to exit?',
                        onOk: function() {
                            _this.logout();
                        }
                    }); 
                }else if(_this.$i18n.locale=='it'){
                    this.$confirm({
                        title: 'Operazione richiesta',
                        width: 300,
                        content: 'sei sicuro di uscire ?',
                        onOk: function() {
                            _this.logout();
                        }
                    }); 
                }else if(_this.$i18n.locale=='zh'){
                    this.$confirm({
                        title: '操作提示',
                        width: 300,
                        content: '确定退出吗?',
                        onOk: function() {
                            _this.logout();
                        }
                    }); 
                }
                          	
            },
            /**
             * 账户设置
             */
            profile() {
            	this.$router.push({name: Util.routeName.profile});
            },
            /**
             * 系统首页
             */
            indexPage() {
            	this.$router.push({name: Util.routeName.home});
            },
            //显示modal1
            showModal1() {
            	this.modal1.show = true;
            },
            /**
             * 保存modal1的数据
             */
            saveModal1() {
            	let menus = this.$store.getters.auth_menus;
            	console.log(menus);
            },
            /**
             * 取消保存modal1
             */
            cancelModal1() {
            	this.modal1.show = false;
            },
            //常用菜单
            commonMenu(cm_) {
                console.log(cm_);
            	this.$router.push({name: cm_.name});
            },
            //锁定屏幕
            lockScreen () {
                let lockScreenBack = document.getElementById('lock_screen_back');
                lockScreenBack.style.transition = 'all 3s';
                lockScreenBack.style.zIndex = 10000;
                lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px #667aa6 inset';
                this.showUnlock = true;
                this.$store.dispatch('frameworkLock');
                Cookies.set('last_page_name', this.$route.path); // 本地存储锁屏之前打开的页面以便解锁后打开
                setTimeout(() => {
                    lockScreenBack.style.transition = 'all 0s';
                    this.$router.push({
                        name: 'locking'
                    });
                }, 800);
            },
            // 问候信息相关
            welcomeInfo() {
	            if (!Cookies.get('hasGreet')) {
	                let now = new Date();
	                let hour = now.getHours();
	                let greetingWord = {
	                    title: '',
	                    words: ''
	                };
	                let userName = this.$store.getters.auth_username;
                    console.log(userName);
                    
                    if(this.$i18n.locale=='zh'){
                        if (hour < 6) {
                            greetingWord = {title: '凌晨好~' + userName, words: '早起的鸟儿有虫吃~'};
                        } else if (hour >= 6 && hour < 9) {
                            greetingWord = {title: '早上好~' + userName, words: '来一杯咖啡开启美好的一天~'};
                        } else if (hour >= 9 && hour < 12) {
                            greetingWord = {title: '上午好~' + userName, words: '工作要加油哦~'};
                        } else if (hour >= 12 && hour < 14) {
                            greetingWord = {title: '中午好~' + userName, words: '午饭要吃饱~'};
                        } else if (hour >= 14 && hour < 17) {
                            greetingWord = {title: '下午好~' + userName, words: '下午也要活力满满哦~'};
                        } else if (hour >= 17 && hour < 19) {
                            greetingWord = {title: '傍晚好~' + userName, words: '下班没事问候下爸妈吧~'};
                        } else if (hour >= 19 && hour < 21) {
                            greetingWord = {title: '晚上好~' + userName, words: '工作之余品一品书香吧~'};
                        } else {
                            greetingWord = {title: '深夜好~' + userName, words: '夜深了，注意休息哦~'};
                        }
                    }else if(this.$i18n.locale=='en'){
                        if (hour < 6) {
                            greetingWord = {title: 'Good morning~' + userName, words: 'Early bird gets the worm~'};
                        } else if (hour >= 6 && hour < 9) {
                            greetingWord = {title: 'Good morning~' + userName, words: 'Have a cup of coffee to start a good day~'};
                        } else if (hour >= 9 && hour < 12) {
                            greetingWord = {title: 'good morning~' + userName, words: 'Work to cheer~'};
                        } else if (hour >= 12 && hour < 14) {
                            greetingWord = {title: 'good afternoon~' + userName, words: 'Have lunch at lunch~'};
                        } else if (hour >= 14 && hour < 17) {
                            greetingWord = {title: 'good afternoon~' + userName, words: 'I have to be full of energy in the afternoon.~'};
                        } else if (hour >= 17 && hour < 19) {
                            greetingWord = {title: 'good evening~' + userName, words: 'Nothing to say to my parents after work.~'};
                        } else if (hour >= 19 && hour < 21) {
                            greetingWord = {title: 'good evening~' + userName, words: 'The rest of the work is a book~'};
                        } else {
                            greetingWord = {title: 'Good night~' + userName, words: 'Late at night, pay attention to rest~'};
                        }
                    }else if(this.$i18n.locale=='it'){
                         if (hour < 6) {
                            greetingWord = {title: 'Buongiorno~' + userName, words: "L'uccello in anticipo cattura i vermi~"};
                        } else if (hour >= 6 && hour < 9) {
                            greetingWord = {title: 'Buongiorno~' + userName, words: 'Prendi una tazza di caffè per iniziare una buona giornata~'};
                        } else if (hour >= 9 && hour < 12) {
                            greetingWord = {title: 'Buongiorno~' + userName, words: 'Lavora per tifare~'};
                        } else if (hour >= 12 && hour < 14) {
                            greetingWord = {title: 'Buon mezzogiorno~' + userName, words: 'Pranzare a pranzo~'};
                        } else if (hour >= 14 && hour < 17) {
                            greetingWord = {title: 'Buon pomeriggio~' + userName, words: 'Devo essere pieno di energia nel pomeriggio.~'};
                        } else if (hour >= 17 && hour < 19) {
                            greetingWord = {title: 'Buona sera~' + userName, words: 'Niente da dire ai miei genitori dopo il lavoro.~'};
                        } else if (hour >= 19 && hour < 21) {
                            greetingWord = {title: 'Buona sera~' + userName, words: 'Il resto del lavoro è un libro~'};
                        } else {
                            greetingWord = {title: 'Buona notte~' + userName, words: 'A tarda notte, fai attenzione al riposo~'};
                        }
                    }	                                

	                this.$Notice.config({
	                    top: 130
	                });
	                this.$Notice.info({
	                    title: greetingWord.title,
	                    desc: greetingWord.words,
	                    duration: 4,
	                    name: 'greeting'
	                });
	                Cookies.set('hasGreet', 1);
	            }
            },
            //点击消息提示进入未读消息列表页面
            jumpToMessage(){
               this.$router.push({name:'ms_messagesms_smsList'}); 
               // this.unReadmessageCount=0;
            }
        }
    }
</script>
<style scoped>
    .system-parameter{
        font-size: 14px;
    }
</style>